<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/xhtml">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <meta charset="UTF-8">
    <title>文章页</title>
    <link rel="stylesheet" th:href="@{/unauthorize/article.css}">
</head>
<body class="hold-transition sidebar-collapse layout-top-nav layout-navbar-fixed layout-fixed">

<div class="wrapper">


    <!-- Navbar -->
    <div th:include="~{common/header::topnavbar-md}"></div>

    <!-- /.navbar -->

    <!-- Main Sidebar Container -->


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">


        <!-- Main content -->
        <div class="content">
            <div class="container hold-transition register-page">
                <div class="card card1">
<!--                    <canvas id="c" width="1536"></canvas>-->
                    <div class="user">
                        <div class="userbox">
                            <div class="username">
                                <img th:src="@{/dist/img/avatar2.png}" alt="" class="img-circle userimg">
                                <span class="bloggername"></span>
                            </div>
                            <div class="userdetail">
                                <div style="display: none" class="userid"></div>
                                <div class="userarticl">
                                    <span class="userarticlenum"></span>
                                    <span>文章</span>
                                </div>
                                <div class="userfan">
                                    <span class="fansnum"></span>
                                    <span>粉丝</span>
                                </div>
                                <div class="userliked">
                                    <span class="userlikednum"></span>
                                    <span>关注</span>
                                </div>
                                <div class="usercommented">
                                    <span class="usercommendnum"></span>
                                    <span>收藏</span>
                                </div>
                                <div class="userclick">
                                    <span class="userclicknum"></span>
                                    <span>访问</span>
                                </div>
                            </div>
                            <div class="userindex">
                                <button class="btn btn-default tomainbtn">TA的主页</button>
                                <button class="btn btn-danger followbtn nologin" sec:authorize="isAnonymous()">关注</button>
                                <button class="btn followbtn" sec:authorize="isAuthenticated()"></button>
                            </div>

                        </div>
                    </div>
                    <div class="article">
                        <div class="articlebox">
                            <div class="artclehead">
                                <h3 class="articlename"></h3>
                                <div class="articleheadcontent">
                                    <div class="articletagtop">
                                        <span class="articletime"></span>
                                        <i class="fa fa-eye looknum"></i>
                                        <i class="fa fa-star collectedNumber nologin" sec:authorize="isAnonymous()" ></i>
                                        <i class="fa fa-star collectedNumber starnum" sec:authorize="isAuthenticated()" data-toggle="modal" data-target="#showmodal"></i>
                                    </div>
                                    <div class="articletag">
                                        <div class="articletitleli">
                                            <span >文章标签： </span>

                                        </div>
                                        <div class="articlecateli">
                                            <span>分类专栏： </span>

                                        </div>

                                    </div>
                                </div>
                                <div class="articlemain">

                                </div>
                                <div class="articlefeedback">
                                    <a href="/unAuthorize/login"><i class="fa fa-thumbs-up" sec:authorize="isAnonymous()" title="请先登录">点赞<sup class="suplike"></sup></i></a>
                                    <i class="fa fa-thumbs-up likebtn" sec:authorize="isAuthenticated()">点赞<sup class="suplike"></sup></i>
                                    <i class="fa fa-comment">评论<sup class="supcomment"></sup></i>
                                    <i class="fa fa-star nologin" sec:authorize="isAnonymous()">收藏<sup class="supcollect"></sup></i>
                                    <i class="fa fa-star starnum" data-toggle="modal" data-target="#showmodal" sec:authorize="isAuthenticated()">收藏<sup class="supcollect"></sup></i>
                                </div>
                                <div class="articlecomment">
                                    <div class="userinput">
                                        <textarea  id="textcomment"  placeholder="优质评论可以帮助作者获得更高权重"></textarea><br>

                                    </div>
                                    <div class="textnum" style="display: none"><span>你还可以输入</span><span id="word">300</span><span>个字符</span><button class="btn btn-danger nologincomment nologin" sec:authorize="isAnonymous()">您未登陆无法评论</button><button class="btn btn-danger commentbtn" sec:authorize="isAuthenticated()">发布评论</button></div>
                                    <div class="commentli">
                                        <ul class="commentuili">

                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div id="addmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addmodallabel"
                         aria-hidden="true">
                        <form class="needs-validation validateForm adddataForm" novalidate >
                            <div class="modal-dialog">
                                <div class="modal-content addcontent">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="addmodallabel">添加收藏夹类型</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" name="name" placeholder="收藏夹类型" required>
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-user"></span>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback ">
                                                收藏夹类型不能为空
                                            </div>
                                        </div>
                                        <div class="article-show">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="show" id="articcomment1"
                                                       value="true" checked>
                                                <label class="form-check-label" for="articcomment1">
                                                    开启前台显示
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="show" id="articcomment2"
                                                       value="false">
                                                <label class="form-check-label" for="articcomment2">
                                                    关闭前台显示
                                                </label>
                                            </div>
                                        </div>

                                        <div class="input-group mb-3">
                                <textarea id="admincontent" class="form-control" rows="3" maxlength="300" name="content"
                                          style="resize: none"
                                          placeholder="类型简介"></textarea>
                                            <br>
                                            <span id="adminword">0</span><span>/300</span>

                                        </div>


                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="submit" class="btn btn-primary valid-button addcollectbtn">确认</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div>
                        </form>
                    </div>
                    <div id="showmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addmodallabel"
                         aria-hidden="true">
                        <form class="needs-validation validateForm" novalidate >
                            <div class="modal-dialog">
                                <div class="modal-content showcontent">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="showmodallist">收藏夹</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <button type="button" class="btn  btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#addmodal">新增收藏夹</button>
                                        <div class="collect ">
                                            <div class="colletc-list mt-3">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary valid-button addbtn">确认</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div>
                        </form>
                    </div>

                </div>

                <!-- /.register-box -->
                <!-- 右侧栏 -->
                <div th:include="~{common/header::rightaside}"></div>
                <!-- /右侧栏 -->
                <!-- 底部栏 -->
                <div class="foot" th:include="~{common/footer::footer}"></div>
                <!-- /底部栏 -->
                <!--    公有的js-->

                <!--所有js必须放在jq下面-->
                <div th:replace="common/header::commonjs(~{::script})">
                    <!--        私有的js-->
                    <script th:src="@{/unauthorize/article.js}"></script>
                </div>
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

</body>
</html>